<template>
  <div class="dashboard-container">
    <el-card class="tableBar mt-3">
      <label style="margin-right: 5px">员工姓名：</label>
      <el-input v-model="searchName" placeholder="请输入员工姓名" style="width: 15%" clearable />
      <el-button class="normal-btn continue" type="primary" @click="searchEmployee">查询</el-button>
      <el-button type="primary" style="float: right" @click="addEmployee"> + 添加员工 </el-button>
    </el-card>
    <el-card class="mt-3">
      <el-table v-loading="loading" class="tableBox" :data="employeeList">
        <el-table-column align="center" width="100" type="index" label="序号" />
        <el-table-column align="center" width="150" prop="name" label="员工姓名" />
        <el-table-column align="center" width="200" prop="username" label="账号" />
        <el-table-column align="center" prop="phone" label="手机号" />
        <el-table-column align="center" width="200" label="账号状态">
          <template v-slot="{ row }">
            <el-switch
              v-model="row.status"
              inline-prompt
              active-text="启用"
              inactive-text="禁用"
              :inactive-value="0"
              :active-value="1"
              @change="handleStatusChange(row)"
            />
          </template>
        </el-table-column>
        <el-table-column align="center" prop="updateTime" label="最后操作时间" />
        <el-table-column align="center" label="操作">
          <template v-slot="{ row }">
            <el-button type="primary" :icon="Edit" @click="handleEdit(row)">修改</el-button>
            <el-button type="danger" :icon="Delete" @click="deleteEmployee(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-card class="mt-3">
      <el-row justify="center" style="width: 100%" class="mt-3">
        <el-pagination
          class="pageList"
          :page-sizes="[5, 10, 20, 30]"
          layout="prev, pager, next, jumper, -> ,total, sizes"
          :total="pageData.total"
          v-model:current-page="pageData.page"
          v-model:page-size="pageData.pageSize"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
        />
      </el-row>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from "vue-router"
import { getEmployeeListAPI, changeEmployeeStatusAPI, deleteEmployeeAPI } from "@/api/employee"
import { onMounted, ref } from "vue"
import { Edit, Delete } from "@element-plus/icons-vue"
import { ElMessage, ElMessageBox } from "element-plus"
import type { EmployeeItem } from "@/types/employee"

// 全局路由
const router = useRouter()

// 员工列表
const employeeList = ref<EmployeeItem[]>([])

// 分页数据
const pageData = ref({
  page: 1,
  pageSize: 10,
  total: 0
})

// 查询员工姓名
const searchName = ref<string>("")

// 加载状态
const loading = ref(false)

// 添加员工
const addEmployee = () => {
  router.push("/employee/add")
}

// 获取员工列表
const getEmployeeList = async () => {
  loading.value = true
  const res = await getEmployeeListAPI(pageData.value.page, pageData.value.pageSize, searchName.value)
  // console.log(res)
  if (res.code === 1) {
    employeeList.value = res.data.records
    pageData.value.total = res.data.total
  }
  loading.value = false
}

// 页码页数切换
const handleSizeChange = (val: number) => {
  pageData.value.pageSize = val
  getEmployeeList()
}
const handleCurrentChange = (val: number) => {
  pageData.value.page = val
  getEmployeeList()
}

// 搜索员工
const searchEmployee = () => {
  pageData.value.page = 1
  getEmployeeList()
}

// 员工状态切换
const handleStatusChange = async (row: EmployeeItem) => {
  const res = await changeEmployeeStatusAPI(row.id as number, row.status as number)
  if (res.code === 1) {
    ElMessage.success("操作成功")
  }
  getEmployeeList()
}

// 修改员工
const handleEdit = (row: any) => {
  router.push(`/employee/add?id=${row.id}`)
}

// 删除员工
const deleteEmployee = (id: number) => {
  ElMessageBox.confirm("该操作将永久删除该员工", "是否继续", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(async () => {
    if (id === 1) {
      ElMessage.error("超级管理员不能删除")
      return
    }
    const res = await deleteEmployeeAPI(id)
    if (res.code === 1) {
      ElMessage.success("删除成功")
      getEmployeeList()
    }
  })
}
onMounted(() => {
  getEmployeeList()
})
</script>

<style lang="scss" scoped>
.disabled-text {
  color: #bac0cd !important;
}
::v-deep(.el-pager li) {
  border-radius: 5px !important;
}
</style>
